<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>注册页面</title>
  <!-- 引入 Bootstrap 样式 -->
  <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
</head>
<body>
<div class="container">
  <h2>新卡注册</h2>
  <form id="registerForm" action="/springmvc02_ssm/register" method="post">
    <!-- 选择卡号 -->
    <div class="form-group">
      <label for="cardNumber">选择卡号（从以下 9 个以 139 开头的卡号中选择，输入序号）</label>
      <div id="cardNumbers"></div>
      <input type="number" class="form-control" id="cardNumber" name="cardNumber" min="1" max="9" required>
    </div>
    <!-- 选择套餐 -->
    <div class="form-group">
      <label for="package">选择套餐（共 3 类套餐，选择其中一个，输入所对应的序号）</label>
      <div id="packages"></div>
      <input type="number" class="form-control" id="package" name="package" min="1" max="3" required>
    </div>
    <!-- 输入用户名和密码 -->
    <div class="form-group">
      <label for="username">用户名</label>
      <input type="text" class="form-control" id="username" name="username" required>
    </div>
    <div class="form-group">
      <label for="password">密码</label>
      <input type="password" class="form-control" id="password" name="password" required>
    </div>
    <!-- 输入预存话费金额 -->
    <div class="form-group">
      <label for="prepaid">预存话费金额</label>
      <input type="number" class="form-control" id="prepaid" name="prepaid" min="0" required>
    </div>
    <button type="submit" class="btn btn-primary">注册新卡</button>
  </form>
  <div id="message"></div>
</div>

<!-- 引入 jQuery 和 Bootstrap 脚本，确保jQuery先加载 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script>
  $(document).ready(function() {
    // 生成随机卡号
    function generateCardNumbers() {
      let cardNumbers = [];
      for (let i = 0; i < 9; i++) {
        let randomNumber = Math.floor(10000000 + Math.random() * 90000000);
        cardNumbers.push('139' + randomNumber);
      }
      let html = '';
      cardNumbers.forEach((number, index) => {
        html += `<button type="button" class="btn btn-info" onclick="selectCard(${index + 1})">${index + 1}. ${number}</button> `;
      });
      $('#cardNumbers').html(html);
    }

    // 显示套餐信息
    function showPackages() {
      let packages = [
        { id: 1, name: '话唠套餐', price: 58 },
        { id: 2, name: '网虫套餐', price: 68 },
        { id: 3, name: '超人套餐', price: 78 }
      ];
      let html = '';
      packages.forEach(pkg => {
        html += `<button type="button" class="btn btn-info" onclick="selectPackage(${pkg.id})">${pkg.id}. ${pkg.name} (${pkg.price} 元/月)</button> `;
      });
      $('#packages').html(html);
    }

    // 选择卡号
    function selectCard(index) {
      $('#cardNumber').val(index);
    }

    // 选择套餐
    function selectPackage(id) {
      $('#package').val(id);
    }

    // 初始化页面
    generateCardNumbers();
    showPackages();
  });
</script>
</body>
</html>